<!-- <style scoped lang="scss">
.div1 {
  display: flex;

  .search1 {
    flex: 1;
  }

  .icon1 {
    font-size: 30px;
    margin: 10px;
  }
}

.dl1 {
  display: flex;

  dt {
    img {
      padding: 20px;
      width: 197px;
      height: 111px;
    }
  }

  dd {
    padding: 20px 0;

    p {
      display: flex;
      justify-content: space-between;

      span {
        font-size: 12px;
      }
    }
  }
}

.p1 {
  margin-top: 10px;
  display: flex;

  img {
    width: 33.3%;
    padding: 2px;
  }
}

.p2 {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  padding-top: 30px;
}
</style>
<template>
  <div>
    <homeTop :showicon2="true" :showbar="true"></homeTop>
    <van-list :loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <dl
        class="dl1"
        v-for="(item, index) in FindInforData"
        :key="index"
        @click="onFindInfor(item.id)"
      >
        <dt>
          <img :src="item.thumbnail" alt="" />
        </dt>
        <dd>
          <h4>{{ item.title }}</h4>
        </dd>
      </dl>
    </van-list>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { getFindInfor } from '../../api/index'
import homeTop from '@/components/homeTop/index.vue'
import { ref } from 'vue'
import List from 'rc-virtual-list'
const router = useRouter()

const tabId = localStorage.getItem('tabId')
console.log(tabId, 'tabId')

const loading = ref(true)
const finished = ref(false)

const activeIndex = ref(0)
const plateId = ref(tabId)
console.log(plateId)
const page = ref(1)

const FindInforData = ref([] as any[])
const getFinList = async () => {
  const { data: res } = await getFindInfor({
    plateId: plateId.value,
    page: page.value,
    count: 5
  })
  console.log(res, 'getFinList')
  loading.value = false
  finished.value = res.result.length === 0
  FindInforData.value.push(
    ...res.result.map((item: any) => ({
      id: item.id,
      title: item.title,
      thumbnail: item.thumbnail,
      source: item.source,
      releaseTime: item.releaseTime
    }))
  )
}
getFinList()

const onLoad = () => {
  page.value++
  loading.value = true
  getFinList()
}

const onFindInfor = (id: any) => {
  console.log(id, 'id')
  localStorage.setItem('sid', id)
  router.push(`/informationDetail/${id}`)
}
<<<<<<< HEAD
</script> -->
<style scoped lang="scss">
.dom {
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    position: relative;

    .content {
        position: absolute;
        left: 0;
        top: 50px;
        width: 100vw;
    }
}

.dl1 {
    display: flex;

    dt {
        img {
            padding: 20px;
            width: 197px;
            height: 111px;
        }
    }

    dd {
        padding: 20px 0;

        p {
            display: flex;
            justify-content: space-between;

            span {
                font-size: 12px;
            }
        }
    }
}
</style>
<template>
    <div class="dom" @scroll="scroll">
        <homeTop :showicon2="true" :showbar="true"></homeTop>
        <div class="plant" :style="{ height: config.totalHeight + 'px' }"></div>
        <div class="content" :style="{ transform: `translateY(${scrollTopRef}px)` }">
            <!-- <div v-for="item in renderData" :key="item.id" class="item" :style="{height:itemHeight + 'px',borderBottom:'1px solid #ccc'}">
                {{ item.id }}
            </div> -->
            <dl class="dl1" v-for="(item, index) in renderData" :key="index" @click="onFindInfor(item.id)">
                <dt>
                    <img :src="item.thumbnail" alt="">
                </dt>
                <dd>
                    <h4>{{ item.title }}</h4>
                </dd>
            </dl>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { getFindInfor } from '../../api/index'
import { useRouter } from 'vue-router';
import homeTop from '@/components/homeTop/index.vue'
const router=useRouter()
// 获取tabId
const tabId = localStorage.getItem('tabId')
// 将tabId赋值给plateId
const plateId :any= ref(tabId)
// 初始化page为1
const page = ref(1)
// 初始化FindInforData为空数组
const FindInforData = ref([] as any[])
// 获取FindInforData
const getFinList = async () => {
    const {
        data: res
    } = await getFindInfor({
        plateId: plateId.value,
        page: page.value,
        count: 20
    })
    console.log(res);

    FindInforData.value = res.result
    console.log(FindInforData.value, 'getFinList');
}
// 调用getFinList函数
getFinList()
// 点击事件
const onFindInfor = (id: any) => {
    console.log(id, 'id');
    localStorage.setItem('sid', id)
    router.push(`/informationDetail/${id}`)
}

// 获取浏览器窗口高度
const clientHeight = document.documentElement.clientHeight;
// 每个item的高度
const itemHeight = 115
// 计算浏览器窗口可以显示的item数量
const clientItemCount = Math.ceil(clientHeight / itemHeight);
// 初始化sourceData为20个空对象
const sourceData = new Array(20).fill(0).map((_, i) => {
    return { id: i + 1 }
})

// 计算renderData
const renderData = computed(() => {
    return FindInforData.value.slice(config.startIndex, config.endIndex)
})

// 初始化config
const config = reactive({
    startIndex: 0,
    endIndex: 0,
    totalHeight: 0
})

// 初始化scrollTopRef为0
const scrollTopRef = ref(0)

// 滚动事件
const scroll = (e: any) => {
    const scrollTop = e.target.scrollTop;
    // 计算startIndex
    config.startIndex = Math.floor(scrollTop / itemHeight);
    // 计算endIndex
    config.endIndex = config.startIndex + clientItemCount;
    // 计算scrollTopRef
    scrollTopRef.value = config.startIndex * itemHeight
}

// 组件挂载时
onMounted(() => {
    // 总高度
    config.totalHeight = sourceData.length * itemHeight
    config.endIndex = config.startIndex + clientItemCount
})
</script>
